<template>
  <div class="secret-container">
    <!--状态筛选-->
    <div v-if="!showSearch" class="shade"></div>
    <div v-if="!showSearch" class="screen_container">
      <div :class="headIos?'archieve_swrapper-ios':'archieve_swrapper'">
        <div class="archieve_swrapper_title">在职状态</div>
        <checker v-model="workStatus" type="checkbox" default-item-class="_item" selected-item-class="_item-selected">
          <checker-item value="INJOIN">在职</checker-item>
          <checker-item value="UNJOIN">拒绝入职</checker-item>
          <checker-item value="ONJOIN" style="margin-right: 0;">入职中</checker-item>
          <checker-item value="ONLEAVE" >离职确认中</checker-item>
          <checker-item value="RESIGNED" >离职已归档</checker-item>
        </checker>
        <br>
        <!--<span>{{workStatus}}</span>-->
        <div class="archieve_swrapper_title">背调状态</div>
        <checker v-model="reportStatus" type="checkbox" default-item-class="_item" selected-item-class="_item-selected">
          <checker-item value="NORMAL">正常报告</checker-item>
          <checker-item value="UNUSUAL">问题报告</checker-item>
          <checker-item value="REVIEW" style="margin-right: 0;">待生成</checker-item>
          <checker-item value="UNCOMMITTED" >未提交</checker-item>
          <checker-item value="UNPAY" >待支付</checker-item>
          <checker-item value="UNAUTH" style="margin-right: 0;">待审核</checker-item>
          <checker-item value="AUTHOVER" >授权过期</checker-item>
          <checker-item value="REFUSEAUTH" >拒绝审核</checker-item>
        </checker>
        <!--<span>{{reportStatus}}</span>-->
        <div class="footer">
          <button :disabled="dis" @click="archieve" class="archieve_confirm">确定</button>
          <button @click="reset" class="archieve_reset">重置</button>
        </div>
      </div>
    </div>

    <k-header :headTitle="_headTitle" goBack="" :rightTitle="_rightTitle" @rightClick="Screen"></k-header>
    <div :class="headIos?'archieve_wrapper-ios':'archieve_wrapper'" @click="oSearch">
      <input class="archieve_input _input" placeholder="姓名查询" readonly>
      <div class="archieve_search">搜索</div>
      <img class="archieve_img" src="../../assets/img/reference/report-center-glass.png"/>
    </div>
    <!--创建资料-->
    <img class="suspend" src="../../assets/img/secret/fixed.png" @click="newMen" alt="">
    <!--空列表-->
    <div class="noMassage" v-if="noInfo">
      <img src="../../assets/img/no-massage.png" alt="">
      <p>还没有档案哟</p>
    </div>
    <!--列表-->
    <div class="secret-scroller" v-if="isAuth">
      <scroller
        :on-refresh="refresh"
        refreshText="拼命加载中"
        :on-infinite="infinite"
        noDataText=""
        ref="stop"
        v-if="!noInfo"
      >
        <div class="archieve_list" @click="showDetail(item.id)" v-for="item in secretFilesList" :key="item.id">
          <div class="archieve_listf">
            <div class="listf_details">
              <div class="listf_detailsName">{{item.realName}}</div>
              <div class="listf_compStates">
                <p>{{item.position}}／{{item.workStatusDesc}}</p>
              </div>
            </div>
            <div class="listf_star">
              <rater class="k-star" :margin="1" :value="Number(item.scoreAvg)" :font-size="15" disabled></rater>
              <span>员工评价({{item.commentNum}})</span>
            </div>
          </div>
          <div class="archieve_listr">
            <div class="archieve_listrn">
              <div class="listf_detailsStatus" :class="item.reportStatus | reportStatusClass(item.reqReportId,item.reportStatus,item.abnormalStatus)">{{item.reportStatus | reportStatus(item.reqReportId,item.reportStatus,item.abnormalStatus)}}</div>
            </div>
          </div>
        </div>


      </scroller>

    </div>


  </div>
</template>

<script>
  import { Rater, Checker, CheckerItem } from 'vux'
  import kHeader from '../common/head'
  import util from '../../libs/util'

  var page =1;
  var firstLoaded = false;
  var url = '/lblsapp-h5/v2/secretfiles/secretListByPage.json';
    export default {

        name: 'secret',
        data () {
            return {
              showSearch:true,
              dis : false,
              headTitle:'',
              rightTitle:'筛选',
              workStatus:[],
              reportStatus:[],
              secretFilesList:[],
              isAuth:true,
              headIos:false,
              noInfo:false
            }
        },
      computed: {
        _headTitle: function () {
            if(this.showSearch){
              return this.headTitle = '员工档案列表'
            }else {
              return this.headTitle = '筛选'
            }
          },
        _rightTitle: function () {
            if(this.showSearch){
              return this.headTitle = '筛选'
            }else {
              return this.headTitle = '关闭'
            }
          },

        },
        components:{
          kHeader,
          Rater,
          Checker,
          CheckerItem
        },
         created(){
           if (window.navigator.userAgent.indexOf('LBLSIOS') > -1){
             this.headIos = true
           }else {
             this.headIos = false
           }
           if(this.$route.params.realName){
             this.getParmis()
           }else {
             //工作台跳转
             if(this.$route.query.donot == 0){
               this.workStatus.push('RESIGNED');
               page = 1;
               var data = {page:page,workStatusString:'RESIGNED'};
               var that = this;
               util.ajax.post(url, data).then(function(data){
                 console.log(data)
                 if(data.data.code == 0){
                   if(data.data.res.data.companyIsAuth == 1 && data.data.res.data.isAuth == 1){
                     that.isAuth = true;
                     that.secretFilesList = data.data.res.data.secretFilesList;
                     if(!that.secretFilesList){
                       that.noInfo = true;
                     }
                   }else {
                     that.isAuth = false;
                   }

//                firstLoaded = true;
                 }else if(data.data.code == 1){
                   that.isAuth = false;
                 }
               }).catch(function(error){
                 console.log(error)
               })
             }else if (this.$route.query.donot == 1){
               this.workStatus.push('UNJOIN');
               page = 1;
               var data = {page:page,workStatusString:'UNJOIN'};
               var that = this;
               util.ajax.post(url, data).then(function(data){
                 console.log(data)
                 if(data.data.code == 0){
                   if(data.data.res.data.companyIsAuth == 1 && data.data.res.data.isAuth == 1){
                     that.isAuth = true;
                     that.secretFilesList = data.data.res.data.secretFilesList;
                     if(!that.secretFilesList){
                       that.noInfo = true;
                     }
//                firstLoaded = true;
                   }else {
                     that.isAuth = false;
                   }

                 }else if(data.data.code == 1){
                   that.isAuth = false;
                 }
               }).catch(function(error){
                 console.log(error)
               })
             }else {
               console.log(this.$route.params);
               page = 1;
               let data = {page:page};
               var that = this;
               util.ajax.post(url, data).then(function(data){
                 console.log(data.data.res.data)
                 if(data.data.code == 0){
                   if(data.data.res.data.companyIsAuth == 1 && data.data.res.data.isAuth == 1){
                     that.isAuth = true;
                     that.secretFilesList = data.data.res.data.secretFilesList;
                     if(!that.secretFilesList){
                       that.noInfo = true;
                     }
                     firstLoaded = true;
                   }else {
                     that.isAuth = false;
                   }
                 }else if(data.data.code == 1){
                   that.isAuth = false;
                 }


               }).catch(function(error){
                 console.log(error)
               })
             }

           }



        },
        filters: {
          reportStatus: function (value,value1,value2,value3) {
            if(value1 == ''){
              return '未提交'
            }else{
              if(value2 == 'PASSED'){
                if(value3 == '0'){
                  return '正常报告'
                }else {
                  return '异常报告'
                }
              }else {
               if(value == 'REVIEW'){
                  return '待生成'
                }else if(value == 'UNPAY'){
                  return '待支付'
                }else if(value == 'UNAUTH'){
                  return '待审核'
                }else if(value == 'REFUSEAUTH'){
                  return '拒绝审核'
                }else if(value == 'AUTHOVER'){
                  return '授权过期'
                }
              }
            }
          },
          reportStatusClass:function(value,value1,value2,value3){
            if(value1 == ''){
              return 'status_gray'
            }else{
              if(value2 == 'PASSED'){
                if(value3 == '0'){
                  return 'status_green'
                }else {
                  return 'status_red'
                }
              }else {
                if(value == 'REVIEW'){
                  return 'status_gray'
                }else if(value == 'UNPAY'){
                  return 'status_yello'
                }else if(value == 'UNAUTH'){
                  return 'status_other'
                }else if(value == 'REFUSEAUTH'){
                  return 'status_other'
                }else if(value == 'AUTHOVER'){
                  return 'status_other'
                }
              }
            }
          }
        },
        methods:{
          getParmis(){
//            alert(123)
            console.log(this.$route.params.realName);
            page = 1;
            var data = {page:page,realName:this.$route.params.realName};
            var that = this;
            util.ajax.post(url, data).then(function(data){
              console.log(data)
              if(data.data.code == 0){
                if(data.data.res.data.companyIsAuth == 1 && data.data.res.data.isAuth == 1){
                  that.isAuth = true;
                  that.secretFilesList = data.data.res.data.secretFilesList;
                  if(!that.secretFilesList){
                    that.noInfo = true;
                  }
                  firstLoaded = true;
                }else {
                  that.isAuth = false;
                }

              }else if(data.data.code == 1){
                that.isAuth = false;
              }
            }).catch(function(error){
              console.log(error)
            })
          },
          refresh(){
            //清空this.$route.params
            this.$route.params.realName = '';

            firstLoaded = true;
            this.workStatus =[];
            this.reportStatus=[]
            console.log(1)
            page = 1;
            var data = {page:page};
            var that = this;
            util.ajax.post(url, data).then(function(data){
              console.log(data)
              if(data.data.code == 0){
                if(data.data.res.data.companyIsAuth == 1 && data.data.res.data.isAuth == 1){
                  that.isAuth = true;
                  that.secretFilesList = data.data.res.data.secretFilesList;
                  if(!that.secretFilesList){
                    that.noInfo = true;
                  }
                  that.$refs.stop.finishPullToRefresh()
                }else {
                  that.isAuth = false;
                }

              }else if(data.data.code == 1){
                that.isAuth = false;
              }
            }).catch(function(error){
              console.log(error)
            })
//         alert('下拉刷新')
//          this.$refs.stop.finishPullToRefresh()
          },
          infinite(){
            console.log(firstLoaded)
            if (!firstLoaded) {
              this.$refs.stop.finishInfinite();
              return;
            }else {
              page++;
              console.log('page'+page)
              let data = {page:page,workStatusString:this.workStatus.toString(),reportStatusString:this.reportStatus.toString(),realName:this.$route.params.realName}
              var that = this;
              util.ajax.post(url, data).then(function(data){
                console.log(data)
                if(data.data.code == 0){
                  if(data.data.res.data.companyIsAuth == 1 && data.data.res.data.isAuth == 1){
                    that.isAuth = true;
                    if(data.data.res.data.secretFilesList.length !== 0){
                      that.secretFilesList = that.secretFilesList.concat(data.data.res.data.secretFilesList);
                      if(!that.secretFilesList){
                        that.noInfo = true;
                      }
                      that.$refs.stop.finishInfinite();
                    }else {
                      that.$refs.stop.finishInfinite(true)
                    }
                  }else {
                    that.isAuth = false;
                  }

                }else if(data.data.code == 1){
                  that.isAuth = false;
                }
              }).catch(function(error){
                console.log(error)
              })
            }


          },
          Screen:function(val){
            if(this.showSearch){
              this.workStatus =[];
              this.reportStatus=[]
            }
            this.showSearch = !this.showSearch;
          },
          archieve:function(){
            this.showSearch = !this.showSearch;
            console.log(this.workStatus.toString(),this.reportStatus.toString());
            page = 1;
            var data = {page:page,workStatusString:this.workStatus.toString(),reportStatusString:this.reportStatus.toString()};
            var that = this;
            util.ajax.post(url, data).then(function(data){
              console.log(data)
              if(data.data.code == 0){
                if(data.data.res.data.companyIsAuth == 1 && data.data.res.data.isAuth == 1){
                  that.isAuth = true;
                  that.secretFilesList = data.data.res.data.secretFilesList;
                  if(!that.secretFilesList){
                    that.noInfo = true;
                  }
//                firstLoaded = true;
                }else {
                  that.isAuth = false;
                }

              }else if(data.data.code == 1){
                that.isAuth = false;
              }
            }).catch(function(error){
              console.log(error)
            })


          },
          reset:function(){
           this.workStatus=[];
            this.reportStatus=[];
          },
          newMen(){
            this.$router.push('addsecret')
          },
          showDetail(val){
            this.$router.push( {path: 'secretDetail', query: { workId: val }})
//            this.$router.push('secretDetail')
          },
          //搜索
          oSearch(){
            firstLoaded = false;
            this.$router.push('search')
          }


        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .secret-container{
    width:100%;
    height:100%;
    overflow-y: hidden;
  }
  .suspend{
    position: fixed;
    width: 8rem;
    height: 8rem;
    bottom: 8rem;
    right: 2%;
    display: block;
    z-index: 88;
  }
  .archieve_wrapper{
    margin-top: 45px;
    background: rgb(244,244,244);
    display: flex;
    width: 100%;
    height: 68px;
    box-sizing: border-box;
    padding: 13px 4%;
    position: relative;
  }
  .archieve_wrapper-ios{
    margin-top: 65px;
    background: rgb(244,244,244);
    display: flex;
    width: 100%;
    height: 68px;
    box-sizing: border-box;
    padding: 13px 4%;
    position: relative;
  }
  .archieve_input{
    flex: 1;
    margin: 0;
    background: #ffffff;
    outline: none;
    border: none;
    -web-kit-appearance:none;
    -moz-appearance: none;
    padding-left: 10% ;
  }
  .archieve_search{
    font-size: 1.4rem;
    flex: 0 0 10.8%;
    text-align: right;
    color: #FF790E;
    height: 42px;
    line-height: 42px;
  }
  .archieve_img{
    position: absolute;
    width: 4.3%;
    left: 6%;
    top: 39%;
  }
  .secret-scroller{
    position: relative;
    width:100%;
    height:100%;
  }
  .archieve_list{
    display: flex;
    width: 100%;
    height: 68px;
    padding: 13px 4%;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(244,244,244);
    background: white;
  }
  .archieve_listf{
    flex: 1;
  }
  .archieve_listr{
    flex: 0 0 10.8%;
  }
  .archieve_listrn{
    margin-top: 12px;
    box-sizing: border-box;
    height: 17px;
    font-size: 1rem;
    line-height: 17px;
    color: #FF790E;
    width: 100%;
    padding-right: 26%;
    background-size: 26% 15px;
    background-position: right;
    background-image: url(../../assets/img/reference/jiantour.png);
    background-repeat: no-repeat;
    /*position: relative;*/
  }
  .listf_detailsStatus{
    position: absolute;
    height: 15px;
    line-height: 11px;
    font-size: 1rem;
    color: #FFFFFF;
    right:8%;
    padding: 2px 6px;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .listf_details{
    display: flex;
  }
  .listf_detailsName{
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 1.4rem;
    color: #212121;
    margin-right: 10px;
  }
  .listf_compStates{
    font-size: 1.2rem;
    color: #606060;
  }
  .listf_star span{
    font-size: 1rem;
    color: #808080;
    letter-spacing: 0;
  }
  .k-star{
    margin-top: 4px;
 }
  /*状态颜色*/
  .status_red{
    background: #FF624C;
  }
  .status_green{
    background: #56C401;
  }
  .status_gray{
    background: #C2C2C2;
  }
  .status_yello{
    background: #F39F38;
  }
  .status_other{
    background: white;
    border:1px solid #F39F38;
    color: #F39F38;
  }
  /*筛选*/
  .shade{
    position: fixed;
    width: 100%;
    left: 0;
    top:0;
    height:100%;
    background: rgba(0,0,0,0.60);
    z-index: 998;
    bottom: 0;
  }
  .screen_container{
    position: absolute;
    z-index: 999;
    background: white;
    width: 100%;
  }
  .archieve_swrapper{
    margin-top: 46px;
    padding: 0 5.3%;
  }
  .archieve_swrapper-ios{
    margin-top: 66px;
    padding: 0 5.3%;
  }
  .archieve_swrapper_title{
    height: 43px;
    line-height: 43px;
    font-size: 1.4rem;
    color: #808080;
  }
  .select_item{
    width: 100%;
    font-size: 0;
  }
  ._item{
    display: inline-block;
    width: 30%;
    height: 38px;
    margin-right: 3.7%;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    font-size: 1.4rem;
    text-align: center;
    line-height: 38px;
    color: #808080;
    margin-bottom: 20px;
  }
  ._item-selected{
    color: #FF790E;
    border: 1px solid #F89721;
  }
  .archieve_confirm{
    width: 44%;
    height: 44px;
    text-align: center;
    line-height: 44px;
    margin: 0 2.7%;
    background: #F89721;
    border-radius: 4px;
    font-size: 1.6rem;
    color: #FFFFFF;
    border: none;
    box-sizing: border-box;
  }
  .archieve_reset{
    width: 44%;
    height: 44px;
    text-align: center;
    line-height: 44px;
    margin: 0 2.7%;
    background: #FFFFFF;
    border-radius: 4px;
    font-size: 1.6rem;
    color: #808080;
    border: 1px solid #CDCDCD;
    box-sizing: border-box;
  }
  .footer{
    margin-bottom: 8%;
  }
  /*无数据样式*/
  .noMassage{
    height: 100%;
    background: white;
  }
  .noMassage img{
    display: block;
    width:4.5rem;
    height:14rem;
    padding-top: 36%;
    margin: auto;
  }
  .noMassage p{
    font-size: 14px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    padding-top: 8%;
  }
</style>
